<template>
  <div>
    这是son.vue
    <div class="box">{{ msg }}</div>
    <button @click="msg='你坏'">点我改变msg</button>
    
  </div>
</template>

<script>
export default {
    data() {
        return {
            msg: 'hello',
            timer: null
        }
    },
    // 钩子跟data这些同级 ---- 易错点：不能写到methods里
    beforeCreate() {
        console.log('beforeCreate-最早的钩子', this.msg)
    },
    created () {
        console.log('created-最早能访问数据和方法的钩子', this.msg)

        this.timer = setInterval(() => {
            console.log('我在调用', document.querySelector('.box'))
        }, 1000)
    },
    beforeMount () {
        console.log('beforeMount', document.querySelector('.box'))
    },

    mounted () {
        console.log('mounted', document.querySelector('.box'))
    },

    beforeUpdate () {
        console.log('beforeUpdate',this.msg, document.querySelector('.box').innerHTML)
    },

    updated () {
        console.log('updated',this.msg, document.querySelector('.box').innerHTML)
    },

    beforeDestroy() {
        clearInterval(this.timer)
        console.log('beforeDestroy')
    },

    destroyed() {
        console.log('destroyed')
    }
}
</script>

<style></style>
